<template>
  <div :style="{
          position:'relative',
          width: val.w + 'px',
          height: val.h + 'px',
          border: val.borderWidth+ 'px solid '+val.borderColor,
          backgroundColor: val.backgroundColor
       }">
    <slot></slot>
  </div>
</template>
<script>
  import StylePane from './style.vue';

  const NAME = 'vpd-rectangle';
  export default {
    name: NAME,
    icon: 'vpd-rectangle',
    title: '矩形',
    panel: StylePane,
    setting: {
      type: NAME,
      isContainer: true,//可作为容器
      x: 0,
      y: 0,
      w: 200,
      h: 200,
      minWidth: 20,
      minHeight: 20,
      backgroundColor: '#0066FF',
      borderWidth: 1,
      borderColor: '#333'
    },
    props: {
      val: {
        type: Object
      }
    },
    data() {
      return {
        data: ''
      }
    },
    computed: {},
    methods: {}
  }
</script>
<style scoped>

</style>
